<template class="index">
	<view class="pro_wrapper">

		<view v-for="(item,index) in dataArr" :key="item.id" class="pro_item" @click="svItemFn(item)">
			<view class="top_wrapper">
				<view class="top_wrapper_right">
					<!-- ${$api.baseURL1} -->
					<u--image style="box-img" :showLoading="true" :src=" `${item.head_img}` " radius="20rpx" width="100rpx"
						height="100rpx"></u--image>
				</view>
				<view class="top_wrapper_left">
					<view class="name">
						<view class="title1">{{item.name}}</view>
						<view class="title2 " :class="btnType(item) ? '':'disable'" @click.stop="toDetail(item,index)">
							{{getStatus(item)}}
						</view>
					</view>
					<view class="img_container" style="display: flex;">
						<!-- <u-avatar class="img" v-for="(item1,index1) in item.users" :key="item1.id"
							:src=" `${item1.avatar}` " shape="circle"  size="40rpx"></u-avatar> -->
						<view class="number">社群人数：{{item.users && item.users.length}}名成员</view>
					</view>
					<view class="content text-ellipsis">
						{{item.text}}
					</view>
				</view>

			</view>

		</view>

		<tishi ref="tishiRef"></tishi>


	</view>
</template>

<script>
	import tishi from '@/BX/dynamic/component/tishi.vue'
	export default {
		data() {
			return {

			}
		},
		props: {
			dataArr: {
				type: Array,
				require: true,
				default: []
			}
		},
		components: {
			tishi
		},
		computed: {

			getStatus() {
				// 是否是此群主理人 0 否 1是
				// myStatus 我的状态 0申请 1正常 2禁用 3 拒绝 -1 未申请
				return (item) => {
					let is_manager = item.is_manager
					let myStatus = item.myStatus
					let price = item.price

					if (is_manager == 1) {
						return "会话聊天"
					} else {
						if (myStatus == 0) {
							return "审核中"
						} else if (myStatus == 1) {
							return "会话聊天"
						} else if (myStatus == 2) {
							return "禁用"
						} else if (myStatus == 3) {
							return "拒绝"
						} else if (myStatus == -1) {

							if (parseFloat(price) > 0) {
								return `¥${item.price}加入`
							} else {
								return "免费加入"
							}

						}
					}
				}
			},
			btnType() {
				// 是否是此群主理人 0 否 1是
				// myStatus 我的状态 0申请 1正常 2禁用 3 拒绝 -1 未申请
				return (item) => {
					let is_manager = item.is_manager
					let myStatus = item.myStatus
					if (is_manager == 1) {
						return true
					} else {
						if (myStatus == 0) {
							return false
						} else if (myStatus == 1) {
							return true
						} else if (myStatus == 2) {
							return false
						} else if (myStatus == 3) {
							return true
						} else if (myStatus == -1) {
							return true
						}
					}
				}
			}

		},
		methods: {
			/* 跳转 社群详情页面  */
			svItemFn(item) {
				let userInfo = uni.getStorageSync('userInfo')
				console.log(userInfo)
				if (!uni.getStorageSync('userInfo')) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: `/BX/group/groupDetail?id=${item.id}`
				})
			},
			toDetail(item, index) {
				let _this = this				
				let userInfo = uni.getStorageSync('userInfo')
				console.log(userInfo)
				if (!uni.getStorageSync('userInfo')) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}

				// if (!userInfo.realname) {
				// 	this.$refs.tishiRef.showTooltip()
				// 	return
				// }

				if (!this.btnType(item)) {
					console.log('禁止点击')
					return
				}
				let is_manager = item.is_manager
				let myStatus = item.myStatus
				// is_manager 是否是此群主理人 0 否 1是
				// myStatus 我的状态 0申请 1正常 2禁用 3 拒绝 -1 未申请
				if (is_manager == 1) {
					this.$emit('toChat', item)
					uni.navigateTo({
						url: `/pages/emChatContainer/index?targetId=${item.im_group_id}&chatType=groupChat`,
					});
				} else {
					let price = item.price

					if (myStatus == 1) {
						this.$emit('toChat', item)
						uni.navigateTo({
							url: `/pages/emChatContainer/index?targetId=${item.im_group_id}&chatType=groupChat`,
						});
					} else { //myStatus == 0 2    不用考虑, 上面已经禁止点击了
						this.$emit('join', item, index)
					}
				}

			}

		}
	}
</script>

<style lang="scss" scoped>
	.pro_wrapper {
		margin: 0rpx 30rpx;
		background: $UNI-backgroundColor;

		.pro_item {
			background: white;
			padding: 20rpx 20rpx;
			margin-bottom: 30rpx;
			border-radius: 10rpx;

			.top_wrapper {
				display: flex;
				justify-content: space-between;

				.top_wrapper_left {
					flex: 1;
					padding-left: 18rpx;

					.content {
						color: #BDBDBD;
						font-size: 26rpx;
						margin-top: 20rpx;
					}

					.name {

						padding-bottom: 10rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.title1 {
							color: #000000;
							font-weight: bold;
							font-size: 33rpx;
						}

						.title2 {
							background: linear-gradient(135deg, #FF4647 0%, #F78A24 100%);
							color: white;
							font-size: 22rpx;
							padding: 15rpx 10rpx;
							border-radius: 10rpx;
							min-width: 100rpx;
							text-align: center;
						}

						.disable {
							background: #999 !important;
						}
					}

					.img_container {
						.img {
							margin-right: 10rpx;
						}

						.number {
							font-size: 28rpx;
							color: #000000;
							background: $UNI-backgroundColor;
							padding: 5rpx 15rpx;
						}
					}
				}

				.top_wrapper_right {
					margin-top: 10rpx;
				}
			}


		}
	}
</style>